 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%out.print("<script>var vmname='"+request.getParameter("vmname")+"' </script>"); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>实时监控信息</title>
	<%@ include file="/WEB-INF/include/include.jsp" %>
	<script type="text/javascript" src="<%=path %>/js/rms/resourcesMonitor/GetInfoAll.js"></script>
  </head>
  <body>
  		<div class="listpage-locked-content">
			<h2 class="listpage-lk-title" >实时监控信息</h2>
			<div class="listpage-lk-search" id="searchWrap" ></div>
			<div class="listpage-lk-tbar" id="tbarWrap"></div>
		</div>
		
		<div class="listpage-content">
			<div class="listpage-grid" id="infoChartWrap1"></div>
			<div class="listpage-grid" id="infoChartWrap2"></div>
			<div class="listpage-grid" id="infoChartWrap3"></div>
		</div>
		
  </body>
</html>
<ui:page>
<ui:formPanel renderTo="tbarWrap" layout="hbox">
<x:items>
<ui:formPanel.comboxstatic id="counterName" fieldLabel="查询参数" width="160"  labelWidth="60"
data="[['usage','usage']]" config="true"></ui:formPanel.comboxstatic>
<ui:formPanel.comboxstatic id="interval" fieldLabel="取点间隔" width="160"  labelWidth="60" 
data="[['20','20']]" value="20" config="true"></ui:formPanel.comboxstatic>
<ui:button handler="GetInfo.realtimeSearch" text="查询" iconCls="icon-search" scope="GetInfo"></ui:button>
</x:items>
</ui:formPanel>
<x:bottomScript>

var store1 = Ext.create('Ext.data.JsonStore', {
    fields: ['drawTime','infoPoint','unit'],
    data: []
});
var store2 = Ext.create('Ext.data.JsonStore', {
    fields: ['drawTime','infoPoint','unit'],
    data: []
});
var store3 = Ext.create('Ext.data.JsonStore', {
    fields: ['drawTime','infoPoint','unit'],
    data: []
});

Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

var panel1 = Ext.create('widget.panel', {
    autoWidth: true,
    height: 250,
    id:'panel1',
    title:'CPU实时监控信息查询',
    renderTo: 'infoChartWrap1',
    layout: 'fit',
    items: {
        xtype: 'chart',
        animate: false,
        id:'chartPanel1',
        store: store1,
        insetPadding: 30,
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['infoPoint'],
            title: false,
            grid: true,
            label: {
                renderer: function(v) {
                  if(store1.getCount()>0) {
                    return v+' '+store1.getAt(0).get('unit');
                  } else {
                    return v;
                  }
                 },
                font: '10px Arial'
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['drawTime'],
            title: false,
            label: {
                font: '11px Arial',
                renderer: function(drawTime) {
                    return drawTime;
                }
            }
        }],
        series: [{
            type: 'line',
            axis: 'left',
            xField: 'drawTime',
            yField: 'infoPoint',
            listeners: {
              itemmouseup: function(item) {
                  
				}  
            },
            tips: {
                trackMouse: true,
                width: 80,
                height: 40,
                renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('drawTime'));
                    this.update(storeItem.get('infoPoint'));
                }
            },
            style: {
                fill: '#38B8BF',
                stroke: '#38B8BF',
                'stroke-width': 3
            },
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0,
                fill: '#38B8BF',
                stroke: '#38B8BF'
            }
        }]
    }
});

var panel2 = Ext.create('widget.panel', {
    autoWidth: true,
    height: 250,
    id:'panel2',
    title:'内存实时监控信息查询',
    renderTo: 'infoChartWrap2',
    layout: 'fit',
    items: {
        xtype: 'chart',
        animate: false,
        id:'chartPanel2',
        store: store2,
        insetPadding: 30,
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['infoPoint'],
            title: false,
            grid: true,
            label: {
                renderer: function(v) {
                  if(store2.getCount()>0) {
                    return v+' '+store2.getAt(0).get('unit');
                  } else {
                    return v;
                  }
                 },
                font: '10px Arial'
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['drawTime'],
            title: false,
            label: {
                font: '11px Arial',
                renderer: function(drawTime) {
                    return drawTime;
                }
            }
        }],
        series: [{
            type: 'line',
            axis: 'left',
            xField: 'drawTime',
            yField: 'infoPoint',
            listeners: {
              itemmouseup: function(item) {
                  
				}  
            },
            tips: {
                trackMouse: true,
                width: 80,
                height: 40,
                renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('drawTime'));
                    this.update(storeItem.get('infoPoint'));
                }
            },
            style: {
                fill: '#38B8BF',
                stroke: '#38B8BF',
                'stroke-width': 3
            },
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0,
                fill: '#38B8BF',
                stroke: '#38B8BF'
            }
        }]
    }
});
var panel3 = Ext.create('widget.panel', {
    autoWidth: true,
    height: 250,
    id:'panel3',
    title:'硬盘实时监控信息查询',
    renderTo: 'infoChartWrap3',
    layout: 'fit',
    items: {
        xtype: 'chart',
        animate: false,
        id:'chartPanel3',
        store: store3,
        insetPadding: 30,
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['infoPoint'],
            title: false,
            grid: true,
            label: {
                renderer: function(v) {
                  if(store3.getCount()>0) {
                    return v+' '+store3.getAt(0).get('unit');
                  } else {
                    return v;
                  }
                 },
                font: '10px Arial'
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['drawTime'],
            title: false,
            label: {
                font: '11px Arial',
                renderer: function(drawTime) {
                    return drawTime;
                }
            }
        }],
        series: [{
            type: 'line',
            axis: 'left',
            xField: 'drawTime',
            yField: 'infoPoint',
            listeners: {
              itemmouseup: function(item) {
                  
				}  
            },
            tips: {
                trackMouse: true,
                width: 80,
                height: 40,
                renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('drawTime'));
                    this.update(storeItem.get('infoPoint'));
                }
            },
            style: {
                fill: '#38B8BF',
                stroke: '#38B8BF',
                'stroke-width': 3
            },
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0,
                fill: '#38B8BF',
                stroke: '#38B8BF'
            }
        }]
    }
});

</x:bottomScript>
</ui:page>

	
